<template>
  <el-dialog :model-value="dialogVisible" title="地图(拖拽图标可以定位至该地址)" :destroy-on-close="true" @close="closeDialog">
    <template #header>
      <span class="dialog-header" style="display: block;text-align: left;">
        <span class="map-label">地图</span>
        <span class="map-tip">(拖拽图标可以定位至该地址)</span>
      </span>
    </template>
    <div class="map-box">
      <map-container ref="mapContainerRefs" @addressDetail="addressDetail" :pointDetail="pointDetail"></map-container>
    </div>
    <template #footer>
      <span class="dialog-footer" style="display: block;text-align: center;">
        <el-button @click="closeDialog()">取消</el-button>
        <el-button type="primary" @click="confirm()">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import MapContainer from "@/components/MapContainer/MapContainer.vue"
import { watch, ref, reactive, onBeforeMount, toRefs, computed, nextTick } from 'vue';
const dialogVisible = ref(false)
const emit = defineEmits(['mapInfo']);
const closeDialog = () => {dialogVisible.value = false}
const pointDetail = ref({})
const addressInfo = ref({})
const mapContainerRefs = ref(null)
const addressDetail = (e:any) => {
  console.log(e,'e----');
  addressInfo.value = e
}
const show = (obj:any) => {
  pointDetail.value = obj
  dialogVisible.value = true
  nextTick(() => {
    mapContainerRefs.value.showMaeker()
  })
} 
const confirm = () => {
  console.log(addressInfo.value,'addressInfo.value');
  emit('mapInfo',addressInfo.value)
  dialogVisible.value = false

  // addressInfo.value
}
defineExpose({
  show,
});
</script>
<style lang="scss" scoped>
.dialog-header {
  .map-label {
    font-size: 18px;
  }
  .map-tip {
    font-size: 14px;
    margin-left: 5px;
  }
}
.map-box {
  width: 100%;
  height:500px;
}
</style>